import React, { useState } from 'react';
import { 
  BarChart3, 
  TrendingUp, 
  FileText, 
  Settings, 
  Plus,
  Download,
  Eye,
  Edit,
  Trash2,
  Calendar,
  Building2,
  Factory,
  Car,
  Zap,
  Flame,
  Leaf
} from 'lucide-react';

const GreenhouseGasInventoryMain = () => {
  const [activeTab, setActiveTab] = useState('overview');
  const [selectedYear, setSelectedYear] = useState('2024');

  // Mock数据 - 组织温室气体盘查数据
  const inventoryData = {
    overview: {
      totalEmissions: 12500,
      scope1Emissions: 3200,
      scope2Emissions: 6800,
      scope3Emissions: 2500,
      reductionTarget: 15,
      currentYear: 2024,
      baselineYear: 2020
    },
    emissionsBySource: [
      { source: '固定燃烧', category: 'Scope 1', emissions: 1800, unit: 'tCO2e', trend: 'up' },
      { source: '移动燃烧', category: 'Scope 1', emissions: 1400, unit: 'tCO2e', trend: 'down' },
      { source: '逸散排放', category: 'Scope 1', emissions: 0, unit: 'tCO2e', trend: 'stable' },
      { source: '电力消耗', category: 'Scope 2', emissions: 4500, unit: 'tCO2e', trend: 'up' },
      { source: '热力消耗', category: 'Scope 2', emissions: 2300, unit: 'tCO2e', trend: 'down' },
      { source: '商务差旅', category: 'Scope 3', emissions: 800, unit: 'tCO2e', trend: 'up' },
      { source: '员工通勤', category: 'Scope 3', emissions: 1200, unit: 'tCO2e', trend: 'down' },
      { source: '废弃物处理', category: 'Scope 3', emissions: 500, unit: 'tCO2e', trend: 'stable' }
    ],
    organizationalBoundary: [
      { facility: '总部大楼', location: '北京市朝阳区', scope: '运营控制', status: 'active' },
      { facility: '生产基地A', location: '上海市浦东新区', scope: '运营控制', status: 'active' },
      { facility: '生产基地B', location: '深圳市南山区', scope: '运营控制', status: 'active' },
      { facility: '物流中心', location: '广州市白云区', scope: '运营控制', status: 'active' },
      { facility: '研发中心', location: '杭州市滨江区', scope: '运营控制', status: 'active' }
    ],
    emissionFactors: [
      { fuel: '电力', factor: 0.5839, unit: 'kgCO2e/kWh', source: '国家发改委', year: 2024 },
      { fuel: '天然气', factor: 2.1622, unit: 'kgCO2e/m³', source: '国家发改委', year: 2024 },
      { fuel: '汽油', factor: 2.9251, unit: 'kgCO2e/L', source: '国家发改委', year: 2024 },
      { fuel: '柴油', factor: 3.0959, unit: 'kgCO2e/L', source: '国家发改委', year: 2024 },
      { fuel: '液化石油气', factor: 3.1013, unit: 'kgCO2e/kg', source: '国家发改委', year: 2024 }
    ],
    reports: [
      { id: 1, name: '2024年度温室气体盘查报告', type: '年度报告', status: '已完成', date: '2024-12-31', size: '2.5MB' },
      { id: 2, name: '2023年度温室气体盘查报告', type: '年度报告', status: '已完成', date: '2023-12-31', size: '2.3MB' },
      { id: 3, name: '2024年Q3温室气体盘查报告', type: '季度报告', status: '已完成', date: '2024-09-30', size: '1.8MB' },
      { id: 4, name: '2024年Q2温室气体盘查报告', type: '季度报告', status: '已完成', date: '2024-06-30', size: '1.7MB' },
      { id: 5, name: '2024年Q1温室气体盘查报告', type: '季度报告', status: '已完成', date: '2024-03-31', size: '1.6MB' }
    ]
  };

  const tabs = [
    { id: 'overview', name: '盘查概览', icon: BarChart3 },
    { id: 'boundary', name: '组织边界', icon: Building2 },
    { id: 'sources', name: '排放源', icon: Factory },
    { id: 'factors', name: '排放因子', icon: Settings },
    { id: 'reports', name: '盘查报告', icon: FileText }
  ];

  const getTrendIcon = (trend) => {
    switch (trend) {
      case 'up': return <TrendingUp className="w-4 h-4 text-red-500" />;
      case 'down': return <TrendingUp className="w-4 h-4 text-green-500 rotate-180" />;
      default: return <TrendingUp className="w-4 h-4 text-gray-400" />;
    }
  };

  const getScopeColor = (scope) => {
    switch (scope) {
      case 'Scope 1': return 'bg-red-100 text-red-800';
      case 'Scope 2': return 'bg-blue-100 text-blue-800';
      case 'Scope 3': return 'bg-green-100 text-green-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  return (
    <div className="p-6 space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">组织温室气体盘查</h1>
          <p className="text-gray-600 mt-1">基于GHG Protocol标准的组织温室气体排放盘查管理</p>
        </div>
        <div className="flex space-x-3">
          <button className="btn-primary flex items-center space-x-2">
            <Plus className="w-4 h-4" />
            <span>新建盘查</span>
          </button>
          <button className="btn-secondary flex items-center space-x-2">
            <Download className="w-4 h-4" />
            <span>导出数据</span>
          </button>
        </div>
      </div>

      {/* 年份选择器 */}
      <div className="bg-white rounded-lg p-4 border">
        <div className="flex items-center space-x-4">
          <label className="text-sm font-medium text-gray-700">盘查年份:</label>
          <select 
            value={selectedYear} 
            onChange={(e) => setSelectedYear(e.target.value)}
            className="border border-gray-300 rounded-md px-3 py-2 text-sm"
          >
            <option value="2024">2024年</option>
            <option value="2023">2023年</option>
            <option value="2022">2022年</option>
            <option value="2021">2021年</option>
            <option value="2020">2020年</option>
          </select>
        </div>
      </div>

      {/* 标签页导航 */}
      <div className="bg-white rounded-lg border">
        <div className="border-b border-gray-200">
          <nav className="flex space-x-8 px-6">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`flex items-center space-x-2 py-4 px-1 border-b-2 font-medium text-sm ${
                    activeTab === tab.id
                      ? 'border-blue-500 text-blue-600'
                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                  }`}
                >
                  <Icon className="w-4 h-4" />
                  <span>{tab.name}</span>
                </button>
              );
            })}
          </nav>
        </div>

        {/* 标签页内容 */}
        <div className="p-6">
          {activeTab === 'overview' && (
            <div className="space-y-6">
              {/* 关键指标卡片 */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div className="bg-gradient-to-r from-red-500 to-red-600 rounded-lg p-6 text-white">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-red-100 text-sm">总排放量</p>
                      <p className="text-2xl font-bold">{inventoryData.overview.totalEmissions.toLocaleString()}</p>
                      <p className="text-red-100 text-sm">tCO2e</p>
                    </div>
                    <Flame className="w-8 h-8 text-red-200" />
                  </div>
                </div>
                
                <div className="bg-gradient-to-r from-orange-500 to-orange-600 rounded-lg p-6 text-white">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-orange-100 text-sm">Scope 1</p>
                      <p className="text-2xl font-bold">{inventoryData.overview.scope1Emissions.toLocaleString()}</p>
                      <p className="text-orange-100 text-sm">tCO2e</p>
                    </div>
                    <Factory className="w-8 h-8 text-orange-200" />
                  </div>
                </div>
                
                <div className="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg p-6 text-white">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-blue-100 text-sm">Scope 2</p>
                      <p className="text-2xl font-bold">{inventoryData.overview.scope2Emissions.toLocaleString()}</p>
                      <p className="text-blue-100 text-sm">tCO2e</p>
                    </div>
                    <Zap className="w-8 h-8 text-blue-200" />
                  </div>
                </div>
                
                <div className="bg-gradient-to-r from-green-500 to-green-600 rounded-lg p-6 text-white">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-green-100 text-sm">Scope 3</p>
                      <p className="text-2xl font-bold">{inventoryData.overview.scope3Emissions.toLocaleString()}</p>
                      <p className="text-green-100 text-sm">tCO2e</p>
                    </div>
                    <Car className="w-8 h-8 text-green-200" />
                  </div>
                </div>
              </div>

              {/* 排放源分布 */}
              <div className="bg-white rounded-lg border p-6">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">排放源分布</h3>
                <div className="space-y-3">
                  {inventoryData.emissionsBySource.map((source, index) => (
                    <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div className="flex items-center space-x-3">
                        {getTrendIcon(source.trend)}
                        <div>
                          <p className="font-medium text-gray-900">{source.source}</p>
                          <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getScopeColor(source.category)}`}>
                            {source.category}
                          </span>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="font-semibold text-gray-900">{source.emissions.toLocaleString()}</p>
                        <p className="text-sm text-gray-500">{source.unit}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* 减排目标 */}
              <div className="bg-white rounded-lg border p-6">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">减排目标</h3>
                <div className="flex items-center space-x-4">
                  <div className="flex-1">
                    <div className="flex justify-between text-sm text-gray-600 mb-2">
                      <span>目标减排: {inventoryData.overview.reductionTarget}%</span>
                      <span>基准年: {inventoryData.overview.baselineYear}</span>
                    </div>
                    <div className="w-full bg-gray-200 rounded-full h-2">
                      <div 
                        className="bg-green-500 h-2 rounded-full transition-all duration-300"
                        style={{ width: `${inventoryData.overview.reductionTarget}%` }}
                      ></div>
                    </div>
                  </div>
                  <Leaf className="w-8 h-8 text-green-500" />
                </div>
              </div>
            </div>
          )}

          {activeTab === 'boundary' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h3 className="text-lg font-semibold text-gray-900">组织边界管理</h3>
                <button className="btn-primary flex items-center space-x-2">
                  <Plus className="w-4 h-4" />
                  <span>添加设施</span>
                </button>
              </div>
              
              <div className="bg-white rounded-lg border overflow-hidden">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设施名称</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">位置</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">边界范围</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {inventoryData.organizationalBoundary.map((facility, index) => (
                      <tr key={index}>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <Building2 className="w-5 h-5 text-gray-400 mr-3" />
                            <div className="text-sm font-medium text-gray-900">{facility.facility}</div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{facility.location}</td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            {facility.scope}
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            {facility.status}
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                          <div className="flex space-x-2">
                            <button className="text-blue-600 hover:text-blue-900">
                              <Eye className="w-4 h-4" />
                            </button>
                            <button className="text-indigo-600 hover:text-indigo-900">
                              <Edit className="w-4 h-4" />
                            </button>
                            <button className="text-red-600 hover:text-red-900">
                              <Trash2 className="w-4 h-4" />
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {activeTab === 'sources' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h3 className="text-lg font-semibold text-gray-900">排放源管理</h3>
                <button className="btn-primary flex items-center space-x-2">
                  <Plus className="w-4 h-4" />
                  <span>添加排放源</span>
                </button>
              </div>
              
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {inventoryData.emissionsBySource.map((source, index) => (
                  <div key={index} className="bg-white rounded-lg border p-6">
                    <div className="flex items-center justify-between mb-4">
                      <div className="flex items-center space-x-3">
                        {getTrendIcon(source.trend)}
                        <h4 className="text-lg font-semibold text-gray-900">{source.source}</h4>
                      </div>
                      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getScopeColor(source.category)}`}>
                        {source.category}
                      </span>
                    </div>
                    
                    <div className="space-y-3">
                      <div className="flex justify-between">
                        <span className="text-gray-600">排放量:</span>
                        <span className="font-semibold">{source.emissions.toLocaleString()} {source.unit}</span>
                      </div>
                      
                      <div className="flex justify-between">
                        <span className="text-gray-600">占比:</span>
                        <span className="font-semibold">
                          {((source.emissions / inventoryData.overview.totalEmissions) * 100).toFixed(1)}%
                        </span>
                      </div>
                    </div>
                    
                    <div className="mt-4 flex space-x-2">
                      <button className="btn-secondary text-sm">查看详情</button>
                      <button className="btn-secondary text-sm">编辑</button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'factors' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h3 className="text-lg font-semibold text-gray-900">排放因子库</h3>
                <button className="btn-primary flex items-center space-x-2">
                  <Plus className="w-4 h-4" />
                  <span>添加因子</span>
                </button>
              </div>
              
              <div className="bg-white rounded-lg border overflow-hidden">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">燃料类型</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">排放因子</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单位</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据来源</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">年份</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {inventoryData.emissionFactors.map((factor, index) => (
                      <tr key={index}>
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{factor.fuel}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{factor.factor}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{factor.unit}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{factor.source}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{factor.year}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                          <div className="flex space-x-2">
                            <button className="text-blue-600 hover:text-blue-900">
                              <Eye className="w-4 h-4" />
                            </button>
                            <button className="text-indigo-600 hover:text-indigo-900">
                              <Edit className="w-4 h-4" />
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {activeTab === 'reports' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h3 className="text-lg font-semibold text-gray-900">盘查报告</h3>
                <button className="btn-primary flex items-center space-x-2">
                  <Plus className="w-4 h-4" />
                  <span>生成报告</span>
                </button>
              </div>
              
              <div className="bg-white rounded-lg border overflow-hidden">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">报告名称</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">生成日期</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">文件大小</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {inventoryData.reports.map((report) => (
                      <tr key={report.id}>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <FileText className="w-5 h-5 text-gray-400 mr-3" />
                            <div className="text-sm font-medium text-gray-900">{report.name}</div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            {report.type}
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            {report.status}
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{report.date}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{report.size}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                          <div className="flex space-x-2">
                            <button className="text-blue-600 hover:text-blue-900">
                              <Eye className="w-4 h-4" />
                            </button>
                            <button className="text-green-600 hover:text-green-900">
                              <Download className="w-4 h-4" />
                            </button>
                            <button className="text-indigo-600 hover:text-indigo-900">
                              <Edit className="w-4 h-4" />
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default GreenhouseGasInventoryMain; 